<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onHide } from '@dcloudio/uni-app'
import { toFaceAuth } from '@/services/faceAuth'

const query = defineProps<{
  mode: 'create' | 'verificate'
}>()
const mode = ref<'create' | 'verificate'>('verificate')

//静态资源
const patientUrl = 'http://114.132.57.246:9000/hospital/patient-wx'
const img = {
  bg: `${patientUrl}/page/user/face_camera/bg.png`,
  tips: `${patientUrl}/page/user/face_camera/tips.png`,
  face: `${patientUrl} /page/user/face_camera/face.png`,
}
const voice = {
  voice_1: `${patientUrl}/voice/voice_1.mp3`,
}

const photoPath = ref('')
const showCamera = ref(true)
const showImage = ref(false)
const audio = ref<any>()

const confirmHandle = () => {
  audio.value.stop()
  let ctx = uni.createCameraContext()
  ctx.takePhoto({
    quality: 'high',
    success: (res) => {
      photoPath.value = res.tempImagePath
      showCamera.value = false
      showImage.value = true
      uni.getFileSystemManager().readFile({
        filePath: photoPath.value,
        encoding: 'base64',
        success: async (res) => {
          let url = ''
          let base64 = 'data:image:/png;base64,' + res.data
          if (mode.value === 'create') {
            url = '/face/auth/createFaceModel'
          } else {
            url = '/face/auth/verifyFaceModel'
          }
          await toFaceAuth(
            {
              photo: base64,
            },
            url,
          ).then((res) => {
            if (mode.value === 'create') {
              uni.showToast({
                icon: 'success',
                title: '面部录入成功',
              })
              setTimeout(function () {
                //跳回到上一页
                uni.navigateBack({
                  delta: 1,
                })
              }, 1000)
            } else {
              if (res.result) {
                uni.showToast({
                  icon: 'success',
                  title: '面部验证成功',
                })
                setTimeout(function () {
                  uni.navigateBack({
                    delta: 1,
                  })
                }, 1000)
              } else {
                uni.showToast({
                  icon: 'error',
                  title: '面部验证失败',
                })
                setTimeout(function () {
                  showImage.value = false
                  showCamera.value = true
                  audio.value.play()
                }, 2000)
              }
            }
          })
        },
      })
    },
  })
}

onLoad(() => {
  mode.value = query.mode
  let createAudio = uni.createInnerAudioContext()
  audio.value = createAudio
  audio.value.src = voice.voice_1
  audio.value.play()
})
onHide(() => {
  if (audio.value != null) {
    audio.value.stop()
  }
})
</script>

<template>
  <view>
    <view class="face-container">
      <camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera">
        <cover-image :src="img.bg" class="bg"></cover-image>
      </camera>
      <view class="image-container" v-if="showImage">
        <image mode="widthFix" class="photo" :src="photoPath"></image>
        <view class="cover"></view>
      </view>
    </view>
    <view class="desc">
      <block v-if="mode == 'verificate'">
        <image :src="img.tips" mode="widthFix" class="tips"></image>
        <text>请把面部放在圆圈内</text>
        <text>拍摄脸部来确认身份</text>
      </block>
      <block v-if="mode == 'create'">
        <image :src="img.face" mode="widthFix" class="face"></image>
        <text>请把完整面部放在圆圈内</text>
        <text>拍摄脸部来保存身份识别数据</text>
      </block>
    </view>
    <button class="btn" @tap="confirmHandle">
      {{ mode == 'create' ? '录入面部信息' : '身份核实' }}
    </button>
  </view>
</template>

<style lang="less">
@import url('face_camera.less');
</style>
